<template>
  <view class="location-page">
    <!-- 地图区域 -->
    <map
      class="map"
      :latitude="latitude"
      :longitude="longitude"
      :scale="17"
      :circles="circles"
      :markers="markers"
      show-location
      @regionchange="onRegionChange"
    ></map>
    <!-- 下方打卡提示卡片 -->
    <view class="clockin-card">
        <div class="section clocking-point">
            <div class="section-title">
                You are in the clock-in area!
            </div>
            <div class="point-list">
                Now you can press clock in in this area
            </div>
        </div>
      <view class="location-info">
        <uv-icon name="map" size="18" color="#3c9cff" style="margin-right: 6rpx;" />
        <text>{{ address }}</text>
      </view>
      <button class="sign-in-btn" @click="commitLocation">提交定位</button>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from "pinia";
import { useUserinfoStore } from "@/store/info";
export default {
  data() {
    return {
      latitude: 22.543096, // 默认深圳
      longitude: 114.057865,
      address: '正在获取地址…',
      avatarUrl: '/static/avatar.png', // 头像图片
      circles: [],
      markers: [],
      googleMapsApiKey: 'AIzaSyDdQIcrkC5BzEmGpX0entO8scSfQYFpvBQ' // 请替换为您的谷歌地图API密钥
    }
  },
  onLoad() {
    this.getCurrentLocation()
  },
    computed: {
    ...mapState(useUserinfoStore, ["info"]),
  },
  methods: {
    getCurrentLocation() {
          console.log('000')
      uni.getLocation({
        type: 'wgs84', // 使用WGS84坐标系，这是谷歌地图使用的标准
        success: (res) => {
          console.log('11111', res)
          this.latitude = res.latitude
          this.longitude = res.longitude
          this.setMapCircleAndMarker()
          this.getAddress(res.longitude, res.latitude)
        },
        fail: (res) => {
          console.log('定位失败，请检查权限', res)
          this.address = '定位失败，请检查权限'
        }
      })
    },
    setMapCircleAndMarker() {
      // 打卡范围200米
      this.circles = [{
        latitude: this.latitude,
        longitude: this.longitude,
        color: '#3c9cff44',
        fillColor: '#3c9cff22',
        radius: 200,
        strokeWidth: 2
      }]
      // 头像marker
      this.markers = [{
        id: 1,
        latitude: this.latitude,
        longitude: this.longitude,
        width: 60,
        borderRadius: 50,
        iconPath: this.info.avatar,
        anchor: { x: 0.5, y: 0.5 }
      }]
    },
    getAddress(longitude, latitude) {
      // 使用谷歌地图Geocoding API进行逆地理编码
      uni.request({
        url: `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${this.googleMapsApiKey}`,
        success: (res) => {
          if (res.data && res.data.results && res.data.results.length > 0) {
            this.address = res.data.results[0].formatted_address
          } else {
            this.address = '未知位置'
          }
        },
        fail: () => {
          this.address = '地址获取失败'
        }
      })
    },
    commitLocation() {
      uni.showToast({
        title: '定位已提交',
        icon: 'success'
      })
      // TODO: 可在此处调用后端接口提交定位信息
    },
    onRegionChange(e) {
      // 地图拖动等事件
    }
  }
}
</script>

<style lang="scss" scoped>

.location-page {
  background: #f7f7f7;
      height: calc(100vh - 88rpx);
  position: relative;
}
.header {
  padding-top: 60rpx;
  padding-bottom: 20rpx;
  text-align: center;
  background: transparent;
}
.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #222;
}
.map {
  width: 100vw;
  height: 100%;
}
.clockin-card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 24rpx #0001;
  padding: 32rpx 24rpx 24rpx 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.clockin-status {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}
.status-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 16rpx;
}
.status-texts {
  display: flex;
  flex-direction: column;
}
.status-title {
  font-size: 32rpx;
  color: #1abc9c;
  font-weight: bold;
}
.status-desc {
  font-size: 24rpx;
  color: #888;
}
.location-info {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #333;
  margin: 16rpx 0 32rpx 0;
}
.commit-btn {
  width: 90%;
  background: linear-gradient(90deg, #3c9cff, #1abc9c);
  color: #fff;
  font-size: 32rpx;
  border-radius: 32rpx;
  padding: 20rpx 0;
  margin-top: 8rpx;
  box-shadow: 0 2rpx 8rpx #3c9cff33;
}

.point-item {
    font-size: 24rpx;
    margin-bottom: 8rpx;
    padding-left: 8rpx;
    font-weight: 500;
    color: #B8CEE7;
}
.clocking-point {
    background: url('/static/image/kaoqing.png') 100% 100% no-repeat;
    border-radius: 25rpx;
    background-size: auto 160rpx;
    padding: 46rpx 30rpx;
    background-position-x: 90%;
    width: calc(100% - 60rpx);
    background-color: #19B36E;
    font-size: 30rpx;
    color: #FFFFFF;
    text-align: left;
    .point-list {
      margin-top: 6rpx;
        font-size: 26rpx;
        margin-top: 10rpx;
    }
}
.supplementary-content {
    font-size: 24rpx;
    color: #F6FEF9;
    margin-top: 10rpx;
}

.section {
}
.attendance{
    padding-right: 40rpx;
    .schedule-row{
        overflow-x: scroll;
        padding-bottom: 10rpx;
    }
}
.sign-in-btn {
	width: 100%;
	height: 90rpx;
	background: linear-gradient(90deg, #1ecb6c 0%, #1ea7cb 100%);
	color: #fff;
	font-size: 32rpx;
	border-radius: 45rpx;
	margin-bottom: 30rpx;
	font-weight: bold;
	box-shadow: 0 8rpx 24rpx rgba(30, 203, 108, 0.15);
}
.section-title {
    font-size: 32rpx;
    font-weight: bold;
    display: flex;
    align-items: center;

}
</style>